<!DOCTYPE html>
<html>
	<head>
		<script src="../js/CodeExpression.js"></script>
		<script src="../js/CE.JavaScript.js"></script>
		<script src="../js/CE.HTML.js"></script>
		<script>
function highlightSyntax(code)
{
	var expr = new CodeExpression(code, document.getElementById('lang').value), str = '';
	for (var i=0; i<expr.length; i++)
		str += '<span class="' + expr[i].type + '">' + htmlentities(expr[i].content) + '</span>';
	document.getElementById('results').innerHTML = str;
	document.getElementById('results').className = document.getElementById('lang').value;
}

function htmlentities(str) // How original, and how untrue.
{
	return str
		.replace(/</g, '&lt;')
		.replace(/>/g, '&gt;');
}
		</script>
		<style>

#in
{
	display: block;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	height: 200px;
}

#results
{
	display: block;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	white-space: pre-wrap;
	font-family: monospace;
}

.Identifier, .TagName, .TagStart, .TagOpener, .TagCloser, .TagCancel
{
	color: darkblue;
}

.ReservedWord, .KeyWord, .FutureWord
{
	font-weight: bold;
}

.KeyWord, .FutureWord
{
	background-color: red;
}

.String
{
	color: darkgreen;
}

.Comment
{
	color: darkgray;
	text-decoration: italics;
}

.RegExp
{
	text-decoration: underline;
}

.AttributeName, .AttributeOperator
{
	color: darkgreen;
	font-weight: bold;
}

.AttributeValue
{
	color: darkred;
	font-weight: bold;
}
		</style>
	</head>
	<body>
		<textarea id="in"></textarea>
		<select id="lang">
			<script>
				for(var x in CodeExpression.languages) document.write('<option value="'+x+'">'+x+'</option>');
			</script>
		</select>
		<button onclick="highlightSyntax(document.getElementById('in').value)">Do syntax highlighting</button>
		<div id="results"></div>
	</body>
</html>
